<template>
  <div>
    <commonMap></commonMap>
  </div>
</template>

<script>
var viewer;
import commonMap from "../commonMap.vue";
import * as Cesium from "cesium/Cesium";
export default {
  data: function () {
    return {
      viewer: null,
    };
  },
  mounted() {
    // setTimeout(() => {
    //   this.initViewer();
    //   this.createEntities();
    // }, 2000);
    this.$nextTick(() => {
      this.initViewer();
      // this.createEntities();
      this.loadDataSource()
    });
  },
  methods: {
    initViewer() {
      this.viewer = window.$_baseMap3D;
      viewer = this.viewer;
      console.log("this.viewer:", this.viewer);
    },
    loadDataSource(){
      this.loadKml()
    },
    loadKml()
    {
      let sourceUrl="/static/SampleData/kml/bikeRide.kml"
      let options={
        camera:this.viewer.scene.camera,
        canvas:this.viewer.scene.canvas,
        clampToGround:true
      }
      let geoCachePromise=Cesium.KmlDataSource.load(sourceUrl,options)
      geoCachePromise.then((dataSource)=>{
           this.viewer.dataSources.add(dataSource)
           let entites=dataSource.entities.values;
           console.log("kml-dataSource-entities:",entites)
          //  entites[0].show=new Cesium.ConstantProperty(false)
          //  entites[1].show=new Cesium.ConstantProperty(false)
           entites[0].label.text="加油咔咔咔咔咔咔s"
           entites[0].label.scale=2.0
           entites[0].label.show=new Cesium.ConstantProperty(true)
           entites[1].label.show=new Cesium.ConstantProperty(false)
           entites[2].label.show=new Cesium.ConstantProperty(false)
      
          // let Cartesian3Position=entites[0].position.getValue(Cesium.JulianDate.now())
            entites[0].point={
              color:Cesium.Color.RED,
              outlineColor:Cesium.Color.WHITE,
              pixelSize:16,
              // outlineWidth:3
            }

            entites[0].label.verticalOrigin=Cesium.VerticalOrigin.BOTTOM
            entites[0].label.horizontalOrigin=Cesium.HorizontalOrigin.CENTER
            entites[0].label.pixelOffset=new Cesium.Cartesian2(100,-20)


          //  entites[0].label.font="60px 楷体"
           this.viewer.zoomTo(entites)
      }) 

     

    },
    createEntities() {
      this.createEllipse(); //创建椭圆
      this.createLine(); //创建线

      this.viewer.zoomTo(this.viewer.entities);

      let TDT_yx = new Cesium.WebMapTileServiceImageryProvider({
        url: "http://{s}.tianditu.gov.cn/img_w/wmts?tk=c233b4ecfccb56cfc41a4f51e64b33f5",
        format: "tile",
        layer: "img",
        style: "default",
        tileMatrixSetID: "w",
        credit: new Cesium.Credit("天地图影像"),
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        maximumLevel: 18,
      });
      let layers = this.viewer.scene.imageryLayers;
      let tdt_yx_imagery = layers.addImageryProvider(TDT_yx);
      console.log("tdt_yx_index:", layers.indexOf(tdt_yx_imagery));
      tdt_yx_imagery.alpha = 1;
      // tdt_yx_imagery.gamma = 5.0;
      // tdt_yx_imagery.brightness = 2.0;
      // tdt_yx_imagery.contrast = 2.0;

      let nightEarth = new Cesium.SingleTileImageryProvider({
        url: "/static/img/nightEarth.jpg",
      });

      let tmpImagery = new Cesium.ImageryLayer(nightEarth);
      // let nightEarthLayer = layers.add(tmpImagery);
      // let nightEarthLayer = layers.addImageryProvider(nightEarth);
      // layers.lower(nightEarthLayer);
      // console.log("nightEarthLayer-index:", layers.indexOf(nightEarthLayer));
      console.log("tdt_yx_index:", layers.indexOf(tdt_yx_imagery));
      // tdt_yx_imagery.alpha = 0.3;
      console.log("contains-tmpImagery:", layers.contains(tmpImagery));
      console.log("contains-tdt_yx_imagery:", layers.contains(tdt_yx_imagery));
    },

    // 创建椭圆
    createEllipse() {
      let redEllipse = this.viewer.entities.add({
        name: "ellipse",
        position: Cesium.Cartesian3.fromDegrees(108, 25),
        ellipse: {
          semiMajorAxis: 300000,
          semiMinorAxis: 200000,
          material: Cesium.Color.RED.withAlpha(0.5),
        },
      });

      // 材质使用图片
      // redEllipse.ellipse.material = "/static/img/earth.jpg";

      // 材质使用棋盘格式
      // redEllipse.ellipse.material = new Cesium.CheckerboardMaterialProperty({
      //   evenColor: Cesium.Color.BLACK.withAlpha(0.2),
      //   oddColor: Cesium.Color.WHITE.withAlpha(0.2),
      //   repeat: new Cesium.Cartesian2(4, 4),
      // });

      // 材质使用条纹格式
      // redEllipse.ellipse.material = new Cesium.StripeMaterialProperty({
      //   evenColor: Cesium.Color.BLACK,
      //   oddColor: Cesium.Color.WHITE,
      //   repeat: 32,
      // });

      //材质使用网格材质属性
      redEllipse.ellipse.material = new Cesium.GridMaterialProperty({
        color: Cesium.Color.YELLOW.withAlpha(0.6),
        cellAlpha: 0.2,
        lineCount: new Cesium.Cartesian2(8, 8),
        lineThickness: new Cesium.Cartesian2(6.0, 2.0),
      });
    },

    // 创建线
    createLine() {
      let line = this.viewer.entities.add({
        name: "",
        position: Cesium.Cartesian3.fromDegrees(108, 30),
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            108, 22, 200000, 108, 30, 10000, 100, 25, 200000,
          ]),
          width: 10.0,
          material: Cesium.Color.RED,
        },
      });
      line.polyline.material = new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.BLUE,
        outlineWidthN: 3,
        outlineColor: Cesium.Color.RED,
      });
      // line.polyline.material = new Cesium.PolylineGlowMaterialProperty({
      //   color: Cesium.Color.BLUE,
      //   glowPower: 0.2,
      // });
    },
  },
  components: { commonMap },
};
</script>

<style lang="scss" scoped>
</style>